<!DOCTYPE html>
<html>
    <head>
        <title>manipulation of elements</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="jquery-ui-1.10.1.custom.css" rel="stylesheet">
        <script type="text/javascript" src="jquery-1.9.1.js"></script>
        <script type="text/javascript" src="jquery-ui.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("input[type=button]").button();

                $("button").button({
                    icons: {
                        primary: "ui-icon-gear",
                        secondary: "ui-icon-triangle-1-s"
                    }
                });

                $("#checkBoxesGroupAction").button("disable");

                $("#makeButtonSets").click(function() {
                    $("#checkBoxDiv, #radios").buttonset({
                        create: function( ) {
                            $("#checkBoxesGroupAction").button("enable");
                            $("#makeButtonSets").button("disable");
                        }
                    });
                });

                $("#checkBoxesGroupAction").click(function() {
                    $("#checkBoxDiv, #radios").buttonset("destroy");
                    $("#checkBoxesGroupAction").button("disable");
                    $("#makeButtonSets").button("enable");
                });
                
                $("#draggableEffect").click(function() {
                   $("div").draggable(); 
                });
                
                $("#draggableEffectDistroy").click(function() {
                   $("div").draggable("destroy"); 
                });

            });
        </script>
        <style>
            body{
                font: 12px "Trebuchet MS", sans-serif;
            }
        </style>
    </head>
    <body>
        <h4>
            <a href="index.html">Index</a>
        </h4>
        <input id="makeButtonSets" type="button" value="Make checkboxes and radios below a button group" />
        <input id="checkBoxesGroupAction" type="button" value="Destroy Button Group" />
        <button id="draggableEffect">Click to make something draggable</button>
        <button id="draggableEffectDistroy">Click to destroy draggable effect</button>

        <div id="checkBoxDiv" style="margin: 14px">
            <input type="checkbox" id="check1" /><label for="check1">Jupiter</label>
            <input type="checkbox" id="check2" /><label for="check2">Saturn</label>
            <input type="checkbox" id="check3" /><label for="check3">Uranus</label>
            <input type="checkbox" id="check4" /><label for="check4">Neptune</label>
        </div>

        <form>
            <div id="radios">
                <input type="radio" id="radio1" name="radio" /><label for="radio1">Volkswagen</label>
                <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Audi</label>
                <input type="radio" id="radio3" name="radio" /><label for="radio3">Seat</label>
            </div>
        </form>

        <div id="subject" style="background-color: lime; width: 300px">
            <p>Lorem ipsum bla..</p>
        </div>
    </body>
</html>
